<template>
  <div class="home-page-content-article">
    <div class="article-section-header">
      <p>Article</p>
      <p class="time">{{ date }} {{ time }}</p>
    </div>
    <div class="article-section-line">
      <div class="search-wrapper">
        <el-autocomplete
            v-model="$store.state.blog.searchKey"
            class="search-input"
            :fetch-suggestions="querySuggest"
            placeholder="Search..."
            :trigger-on-focus="false"
            @keyup.enter.native="handleQuery"
            @select="handleQuery"
        ></el-autocomplete>
        <div @click="handleQuery" class="btn-search">
          <svg-icon class="search-btn" name="search-blog"></svg-icon>
        </div>
      </div>
      <div class="item-status">
        <span class="status-number">{{ $store.state.blog.total }}</span>
        <span class="status-type">Total Article</span>
      </div>
    </div>
    <div class="article-boxes jsListView">
      <!--   置顶文章   -->
      <div class="article-box-wrapper" v-if="top.id && showTop">
        <div class="article-box top" @click="handleJump(top)">
          <div class="box-head">
            <span class="author">{{ top.author }}</span>
            <div class="dividing"></div>
            <span class="date">{{ DateUtil.toShowTimeFormat(top.createTime) }}</span>
            <div class="top-flag">置顶</div>
            <div class="dividing" v-if="top.tagsName && top.tagsName !== null && top.tagsName.length > 0"></div>
            <span v-for="tag in top.tagsName" class="tag">
              {{ tag }}
            </span>
          </div>
          <div class="box-content">
            <div class="content-main">
              <div class="title-row">
                <router-link class="title"
                             :to="{ name: 'Blog', params: { bId: top.id }}"
                             v-html="top.title">
                </router-link>
              </div>
              <div class="abstract" v-html="$options.filters.ellipsis(top.content)">
              </div>
              <div class="icon">
                <i class="el-icon-thumb"></i>&nbsp
                <div class="count">{{ top.clickNum }}</div>
                <i class="el-icon-chat-round"></i>&nbsp
                <div class="count">{{ top.commentCount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--   文章列表   -->
      <div v-for="item in $store.state.blog.articleList" class="article-box-wrapper" v-show="item.id != top.id || !showTop">
        <div class="article-box" @click="handleJump(item)">
          <div class="box-head">
            <span class="author">{{ item.author }}</span>
            <div class="dividing"></div>
            <span class="date">{{ DateUtil.toShowTimeFormat(item.createTime) }}</span>
            <div class="dividing" v-if="item.tagsName !== null && item.tagsName.length > 0"></div>
            <span v-for="tag in item.tagsName" class="tag">
              {{ tag }}
            </span>
          </div>
          <div class="box-content">
            <div class="content-main">
              <div class="title-row">
                <router-link class="title"
                             :to="{ name: 'Blog', params: { bId: item.id,bTitle: item.title }}"
                             v-html="item.title">
                </router-link>
              </div>
              <div class="abstract" v-html="$options.filters.ellipsis(item.content)">
              </div>
              <div class="icon">
                <i class="el-icon-thumb"></i>
                <div style="margin: 0 20px 0 3px">{{ item.clickNum }}</div>
                <i class="el-icon-chat-round"></i>&nbsp;
                <div style="margin: 0 20px 0 3px">{{ item.commentCount }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="loading-container" v-if="$store.state.blog.loading">
        <svg class="spinner" width="35px" height="35px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
          <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
        </svg>
      </div>
    </div>
  </div>

</template>

<script>
import {getSuggest, listBlog, getTopBlog} from "@/api/blog";

export default {
  name: "Article-box",
  filters: {
    ellipsis(value) {
      if (!value) return ''
      return value.replace(/#/g, '')
          .replace(/`/g, '')
          .replace(/\*/g, '');
    },
    splitTime(value) {
      if (!value) return ''
      return value.substring(0, 10);
    }
  },
  computed: {
    noMore() {
      return this.$store.state.blog.currentPage * this.$store.state.blog.pageSize >= this.$store.state.blog.total
    },

  },
  data() {
    return {
      queryParams: {},
      titleSuggest: [],
      top: {},
      showTop: true,
      pagination: {
        currentPage: 1,
        pageSize: 6,
        total: 0
      },
      time: '',
      date: '',
      week: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      timerID: setInterval(this.updateTime, 1000)
    };
  },
  methods: {
    updateTime() {
      let cd = new Date();
      this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
      this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()];
    },
    zeroPadding(num, digit) {
      let zero = '';
      for (let i = 0; i < digit; i++) {
        zero += '0';
      }
      return (zero + num).slice(-digit);
    },
    handleJump(row) {
      this.$router.push({name: 'Blog', params: {bId: row.id,bTitle: row.title}})
    },
    //获取查询建议
    querySuggest(queryString, cb) {
      let trim = queryString.trim();
      getSuggest(trim).then(res => {
        // 调用 callback 返回建议列表的数据
        cb(res.data)
      })
    },
    handleQuery() {
      this.$store.commit('SET_SEARCH_CURRENTPAGE', 1)
      this.queryParams.currentPage = this.$store.state.blog.currentPage;
      this.queryParams.pageSize = this.$store.state.blog.pageSize
      const keyword = this.$store.state.blog.searchKey;
      this.queryParams.keyword = keyword
      if (!keyword || keyword == ' ') {
        //无内容搜索 显示置顶
        this.showTop = true
      } else {
        //搜索时，置顶不显示
        this.showTop = false
      }
      listBlog(this.queryParams).then(res => {
        if (res.status) {
          this.$store.commit('SET_BLOG_LIST', res.data.source)
          this.$store.commit('SET_BLOG_TOTAL', res.data.total)
        } else {
          this.handleQuery()
        }
      });
    },
    handleTop() {
      getTopBlog().then(res => {
        if (res.status && res.data) {
          this.top = res.data
        }
      })

    }
  },
  created() {
    this.handleQuery()
    this.handleTop()
  }
}
</script>

<style lang="scss">




</style>

